<template>
<div class="alipay-appletschannel views-container">
    <div class="wlm-table">
        <div class="warning">
            <div class="flex-row flex-justify-b flex-align-c">
                <div>
                    <p class="warning-title">支付宝小程序</p>
                    <p style="margin-top:10px;">绑定支付宝小程序，将平台与支付宝小程序打通</p>
                </div>
                <div>
                    <el-button style="margin-right:20px;" v-if="!isOpenEdit" size="small" plain class="orders-blue" @click="open">修改配置</el-button>
                    <el-switch v-model="formFormatData.formData.channel.alipay.switch" @change="switchChannel" active-value="1" inactive-value="0">
                    </el-switch>
                </div>
            </div>
        </div>
        <div class="flex-row flex-warp">
            <div class="wlm-form" style="width:50%">
                <section>
                    <div class="wlm-form-content channel-card">
                        <el-form v-if="formFormatData.isOpendSetting" :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="140px" class="retail-form" label-position="right">
                            <el-form-item label="小程序名称" prop="username">
                                <span v-if="!isOpenEdit">{{formFormatData.formData.channel.alipay.name}}</span>
                                <el-input v-if="isOpenEdit" v-model="formFormatData.formData.channel.alipay.name"></el-input>
                            </el-form-item>
                            <el-form-item label="支付宝公钥" prop="username">
                                <span v-if="!isOpenEdit" class="ellipsis" style="width:300px">{{formFormatData.formData.channel.alipay.public_key}}</span>
                                <el-input v-if="isOpenEdit" v-model="formFormatData.formData.channel.alipay.public_key"></el-input>
                            </el-form-item>
                            <el-form-item label="私钥" prop="username">
                                <span  v-if="!isOpenEdit" class="ellipsis" style="width:300px">{{formFormatData.formData.channel.alipay.private_key}}</span>
                                <el-input v-if="isOpenEdit" v-model="formFormatData.formData.channel.alipay.private_key"></el-input>
                            </el-form-item>
                            <el-form-item label="AppId" prop="password">
                                <span v-if="!isOpenEdit">{{formFormatData.formData.channel.alipay.AppId}}</span>
                                <el-input v-if="isOpenEdit" v-model="formFormatData.formData.channel.alipay.AppId"></el-input>
                            </el-form-item>
                            <el-form-item label="aesKey">
                                <span v-if="!isOpenEdit">{{formFormatData.formData.channel.alipay.aes_key}}</span>
                                <el-input v-if="isOpenEdit" v-model="formFormatData.formData.channel.alipay.aes_key"></el-input>
                            </el-form-item>
                            <el-form-item label="小程序LOGO" prop="repassword">
                                <img
v-if="!isOpenEdit"
                            class="wlm-upload-img"
                            :src="formFormatData.formData.channel.alipay.logo?formFormatData.formData.channel.alipay.logo[0].file_path:`${require('@/assets/custorm_style/default_picture.png')}`"
                          >
                                <choose-files v-if="isOpenEdit" ref="chooseFiles" :config="chooseLogoConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                                <div class="form-help">建议尺寸：100*100</div>
                            </el-form-item>
                            <el-form-item label="二维码" prop="repassword" class="slider">
                                <img
v-if="!isOpenEdit"
                            class="wlm-upload-img"
                            :src="formFormatData.formData.channel.alipay.qrcode?formFormatData.formData.channel.alipay.qrcode[0].file_path:`${require('@/assets/custorm_style/default_picture.png')}`"
                          >
                                <choose-files v-if="isOpenEdit" ref="chooseFiles" :config="chooseBgConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                                <div class="form-help">建议尺寸：100*100</div>
                            </el-form-item>
                        </el-form>
                        <div v-else class="status-main pos-center">
                            <div class="flex-row flex-justify-c">
                                <div class="flex-col">
                                    <router-link tag="span" to="/channel/alipayAppletsChannelAdd">
                                        <el-button class="status-main-btn" type="success" style="background:rgb(104, 211, 135);border:none;"><i>
                        <svg-icon
                          class="status-main-svg"
                          icon-class="alipayApplets"
                        /></i>&nbsp; 立即接入</el-button>
                                    </router-link>
                                    <div class="flex-row flex-justify-e mar-top-4">
                                        <div>没有小程序，去<a
                        target="_blank"
                        href="https://mp.weixin.qq.com/"
                        class="alink-blue"
                      >注册</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <div class="wlm-form" style="width:50%">
                <section>
                    <div class="wlm-form-content channel-card flex-row flex-align-c flex-justify-c">
                        <el-form v-if="formFormatData.isOpendSetting" :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="1px" class="retail-form" label-position="right">
                            <el-form-item style="width:500px">
                                <div class="flex-col flex-align-c flex-justify-c">
                                    <svg-icon icon-class="zfbicon" style="font-size:64px;" />
                                    <p style="margin:15px 0">支付宝小程序</p>
                                    <el-button plain icon="document" :data-query="JSON.stringify({type:'aliapp'})" v-exceldown="{path:'AppleApLetDownload&',query: {}}">代码打包下载</el-button>

                                </div>
                            </el-form-item>
                        </el-form>
                    </div>
                </section>
            </div>
        </div>
    </div>
    <div v-if="isOpenEdit" v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" @click="saveForm" type="primary">保存</el-button>
        <el-button @click="isOpenEdit=false" size="small">取消</el-button>
    </div>
</div>
</template>

<script>
import {
  channelGet,
  channelSave
} from '@/api/channel'
import exceldown from '@/directive/exceldown'
import mixins from '@/mixins/mixins'
import ChooseFiles from '@/components/ChooseFiles/index'
export default {
  mixins: [mixins.getters('Form')],
  name: 'WeChatAppletsChannel',
  components: {
    ChooseFiles
  },
  directives: {
    exceldown
  },
  created() {

  },
  data() {
    return {
      isOpenEdit: false,
      chooseLogoConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'channel|alipay|logo',
          model: 'img'
        }
      },
      chooseBgConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'channel|alipay|qrcode',
          model: 'img'
        }
      },
      formFormatData: {
        key: 'alipayAppletsChannel',
        api: {
          editForm: {
            api: channelGet,
            params: {
              type: 'alipay',
              always: true
            },
            filters: {
              img: {
                bindInit: ['chooseLogoConfig', 'chooseBgConfig']
              }
            }
          },
          submitForm: channelSave
        },
        autofocusType: 1,
        isOpendSetting: false,
        formData: {
          type: 'alipay',
          channel: {
            alipay: {
              name: '',
              AppId: '',
              aes_key: '',
              AppSecret: '',
              public_key: '',
              private_key: '',
              logo: [],
              qrcode: [],
              switch: '0'
            }
          }
        },
        rules: {

        }
      }
    }
  },
  methods: {
    saveForm() {
      this.formFormatSubmit({ router: { type: 'replace', path: '', code: 1 } })
      this.isOpenEdit = false
    },
    formFormatCallBack(data, type, response) {
      if (type === 'editForm') {
        const { data: { data: listData = [] } } = response
        // console.log(Array.isArray(listData), '$listData')
        const isOpen = !Array.isArray(listData)
        //  || (Object.keys(listData)[0] === 'switch' && Object.keys(listData)['length'] === 0)
        this.formFormatData.isOpendSetting = isOpen
      }
    },
    open() {
      this.isOpenEdit = true
      // this.$alert('是否需要绑定其它支付宝小程序？', '通知', {
      //   showCancelButton: true,
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   callback: action => {
      //     if (action === 'confirm') {
      //       this.$router.push({
      //         path: '/channel/alipayAppletsChannelAdd?'
      //       })
      //     }
      //   }
      // })
    },
    switchChannel() {
      if (this.formFormatData.isOpendSetting) {
        channelSave(this.formFormatData.formData).then((res) => {
          const { data: { code } } = res
          if (code === 0) {
            this.$message.success('保存成功！~')
          }
        })
      } else {
        this.$message.error('请先接入支付宝公众号再开启！~')
        this.formFormatData.formData.channel.wechat.switch = '0'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.alipay-appletschannel {
    // .form-group {
    //       .wlm-form {
    //           width: 500px;
    //           flex-grow: 1;
    //           margin-right: 20px;
    //       }
    //   }

}
</style>
